<template>
    <label class="pe-radio-button" :class="[modelValue === value &&!getDisabled() ? 'pe-radio-button-active' : '', sizeArr.includes(size) ? `pe-radio-button-${size}` : '', getDisabled() ? 'pe-radio-button-disabled' : '']">
        <input class="pe-radio-inp" ref="radioRef" type="radio" v-model="modelValue" :value="value" :name="radioName"
            :disabled="getDisabled()" @click.stop>
        <div>
            <slot>{{ label }}</slot>
        </div>
    </label>
</template>

<script setup lang="ts">
import { Ref, inject } from "vue"

const modelValue: any = inject("pe-radio-value")

/**
 * @param label 单选框的 label
 * @param value 单选框的值
 * @param disabled 是否禁用单选框
 */
interface Props {
    label?: string | boolean | number,
    value: string | boolean | number,
    disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    disabled: false
})

const radioName: Ref<string> = inject("pe-radio-id")!
const size: Ref<'default' | 'large' | 'small'> = inject("pe-radio-size")!

const getDisabled = () => {
    const tempDisabled: Ref<boolean> = inject("pe-radio-disabled")!
    if (tempDisabled.value) {        
        return true
    } else {
        if (props.disabled) return true
    }
    return false
}

const sizeArr = ["large", "small"]
</script>

<script lang="ts">
export default {
    name: "pe-radio-button"
}
</script>